<template>
    <div class="person">
        <h1>
            情况一:监视(ref)定义的(基本数据)类型
        </h1>
        <h2>当前求和为{{ sum }}</h2>
        <button @click="changeSum">点我+1</button>
    </div>
</template>
<script lang="ts" setup name='Person'>
import { ref, watch } from "vue";
let sum = ref(0)

function changeSum() {
    sum.value+= 1
}
// 我们监视其sum的变化!

/* 


    watch 中的第一个形参是我们需要监视的值....
    第二个值是一个回调函数====>回调函数中的参数有两个(一个是新的内存地址的值,一个是旧的内存地址的值)
    
    当我们使用watch见识ref定义的基本数据类型,直接写数据名就可以了,监视的是其value值的变化.
    
    我们调用watch的返回值的变量,会使我们的监听停止.
*/
const stopWatch = watch(sum, (newValue,oldValue) => { 
    console.log("sum发生了变化",newValue,oldValue);
    if (newValue >= 10) {
        stopWatch()
    }
}
)
        
</script>
<style scoped>
/*  组件的样式 */
    .person{
            /* 设置颜色,设置阴影,
            设置元素的外边框圆角,使用一个半径可以确定一个圆形,当使用两个半径时确定一个椭圆。这个（椭）圆与边框的交集形成圆角效果。
            设置内边距
            */
        background-color: aqua;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px;
    }


</style>
